<template>
    <div class="layout">
        <div class="left">
            <div class="left-up">
                <div class="title">账号注册</div>
                <form @submit.prevent="handleSubmit_res">
                    <div class="form-item">
                        <label for="name">注册学生姓名：</label>
                        <input id="name" v-model="formValue.stuName" type="text" required placeholder="请输入学生姓名">
                    </div>
                    <div class="form-item">
                        <label for="id">注册学生学号：</label>
                        <input id="id" v-model.number="formValue.stuId" type="text" required placeholder="请输入学生学号">
                    </div>
                    <div class="form-item">
                        <label for="level">选择学生年级：</label>
                        <select id="level" v-model.number="formValue.stuGrade" required>
                            <option value="" disabled selected>请选择学生年级</option>
                            <option value="2023">2023级</option>
                            <option value="2024">2024级</option>
                            <option value="2025">2025级</option>
                            <option value="2026">2026级</option>
                            <option value="2027">2027级</option>
                        </select>
                    </div>
                    <button type="submit">
                        提交
                    </button>
                </form>
            </div>
            <div class="left-down">
                <h1 class='title'>已注册学生账号列表</h1>
                <div class="table">
                    <div class="table-item" v-for="item in registeredStudents" :key="item">
                        {{ item.stuName }}----{{ item.stuId }}
                    </div>
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="title">
                账号注销
            </div>
            <form @submit.prevent="handleSubmit_logout">
                <div class="form-item">
                    <label for="id">注销学生学号：</label>
                    <input id="id" v-model.number="formValue.stuId" type="text" required placeholder="请输入学生学号">
                </div>
                <button type="submit">提交</button>
            </form>
        </div>
        <div class="right">
            <div class="title">
                账号密码重置
            </div>
            <form @submit.prevent="handleSubmit_passwordchange">
                <div class="form-item">
                    <label for="id">修改学生学号：</label>
                    <input id="id" v-model.number="formValue.stuId" type="text" required placeholder="请输入学生学号">
                </div>
                <button type="submit">提交</button>
            </form>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted} from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
const registeredStudents = ref([]);
const formValue = ref({
    stuName: '',
    stuGrade: null,
    stuId: null,//没有输入之前stuid都默认为0
});

onMounted(() => {
    // 从localStorage中获取已注册学生账号信息
    const storedStudents = localStorage.getItem('registeredStudents');
    if (storedStudents) {
        registeredStudents.value = JSON.parse(storedStudents);
    }
});

const handleSubmit_res = async () => {
    console.log('提交学生账号注册表单');
    try {
        // 获取当前管理员id
        const adminId = localStorage.getItem('adminId');
        // 构造student对象
        const student = {
            stuId: formValue.value.stuId,
            name: formValue.value.stuName,
        };
        // 发送POST请求
        const response = await axios.post(
            `http://localhost:8080/admin/${adminId}/students`,
            student
        );
        if (response.data && response.data.code === 200) {
            ElMessage.success('学生账号注册成功');
            // 添加到本地列表
            registeredStudents.value.push(student);
            localStorage.setItem('registeredStudents', JSON.stringify(registeredStudents.value));
            // 清空表单
            formValue.value.stuName = '';
            formValue.value.stuId = null;
            formValue.value.stuGrade = null;
        } else {
            ElMessage.error(response.data.msg || '学生账号注册失败');
        }
    } catch (error) {
        ElMessage.error('网络错误或服务器异常');
    }
};
const handleSubmit_logout = async () => {
    console.log('提交学生账号注销表单');
    try {
        // 获取当前管理员id
        const adminId = localStorage.getItem('adminId');
        // 获取要删除的学生学号
        const studentId = formValue.value.stuId;
        // 发送DELETE请求
        const response = await axios.delete(
            `http://localhost:8080/admin/${studentId}/${adminId}/deleteStu`
        );
        if (response.data && response.data.code === 200) {
            ElMessage.success('学生账号注销成功');
            // 从本地列表移除
            registeredStudents.value = registeredStudents.value.filter(student => student.stuId !== studentId);
            localStorage.setItem('registeredStudents', JSON.stringify(registeredStudents.value));
            // 清空表单
            formValue.value.stuId = null;
        } else {
            ElMessage.error(response.data.msg || '学生账号注销失败');
        }
    } catch (error) {
        ElMessage.error('网络错误或服务器异常');
    }
};
const handleSubmit_passwordchange = async () => {
    console.log('提交学生账号密码修改表单');
    try {
        // 获取当前管理员id
        const adminId = localStorage.getItem('adminId');
        // 获取要重置密码的学生学号
        const stuId = formValue.value.stuId;
        // 发送请求
        const response = await axios.put(
            `http://localhost:8080/admin/${stuId}/setStuPassword`,
            { adminId: adminId }, // 直接传字符串
            {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        );
        if (response.data && response.data.code === 200) {
            ElMessage.success('学生密码重置成功');
            formValue.value.stuId = null;
        } else {
            ElMessage.error(response.data.msg || '学生密码重置失败');
        }
    } catch (error) {
        ElMessage.error('网络错误或服务器异常');
    }
};
</script>
<style lang='scss' scoped>
.layout {
    display: flex;
    overflow: auto;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
    padding: 40px 0;
    background: #f4f8fb;
    min-height: 100vh;

    .left,
    .middle,
    .right {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(90, 169, 233, 0.08);
        padding: 32px 28px 28px 28px;
        width: 340px;
        min-height: 420px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: box-shadow 0.2s;

        &:hover {
            box-shadow: 0 8px 24px rgba(90, 169, 233, 0.18);
        }
    }

    .left {
        .left-up {
            width: 100%;

            .title {
                font-size: 24px;
                font-weight: bold;
                color: #357ab8;
                margin-bottom: 24px;
                letter-spacing: 2px;
                text-align: center;
            }

            form {
                display: flex;
                flex-direction: column;
                gap: 22px;

                .form-item {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    label {
                        font-size: 18px;
                        color: #333;
                        font-weight: 500;
                    }

                    input,
                    select {
                        padding: 12px;
                        border: 1.5px solid #bcdffb;
                        border-radius: 6px;
                        font-size: 17px;
                        background: #f7fbfe;
                        transition: border 0.2s;

                        &:focus {
                            border-color: #5ba9e9;
                            outline: none;
                            background: #fff;
                        }
                    }

                    select {
                        cursor: pointer;
                    }
                }

                button[type="submit"] {
                    margin-top: 8px;
                    padding: 12px 0;
                    background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
                    color: #fff;
                    border: none;
                    border-radius: 6px;
                    font-size: 18px;
                    font-weight: bold;
                    cursor: pointer;
                    box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
                    transition: background 0.2s, box-shadow 0.2s;

                    &:hover {
                        background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
                        box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
                    }
                }
            }
        }

        .left-down {
            width: 100%;
            margin-top: 32px;

            .title {
                font-size: 20px;
                color: #357ab8;
                margin-bottom: 18px;
                text-align: center;
            }

            .table {
                .table-item {
                    background: #f7fbfe;
                    margin-bottom: 10px;
                    padding: 12px;
                    border-radius: 4px;
                    font-size: 16px;
                    color: #444;
                    box-shadow: 0 1px 3px rgba(90, 169, 233, 0.04);
                }
            }
        }
    }

    .middle {
        width: 340px;

        .title {
            font-size: 22px;
            color: #357ab8;
            margin-bottom: 18px;
            text-align: center;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: 100%;

            .form-item {
                display: flex;
                flex-direction: column;
                gap: 8px;

                label {
                    font-size: 17px;
                    color: #333;
                }

                input {
                    padding: 10px;
                    border: 1.5px solid #bcdffb;
                    border-radius: 6px;
                    font-size: 16px;
                    background: #f7fbfe;
                    transition: border 0.2s;

                    &:focus {
                        border-color: #5ba9e9;
                        outline: none;
                        background: #fff;
                    }
                }
            }

            button[type="submit"] {
                margin-top: 8px;
                padding: 10px 0;
                background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
                color: #fff;
                border: none;
                border-radius: 6px;
                font-size: 17px;
                font-weight: bold;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
                transition: background 0.2s, box-shadow 0.2s;

                &:hover {
                    background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
                    box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
                }
            }
        }
    }

    .right {
        width: 340px;

        .title {
            font-size: 22px;
            color: #357ab8;
            margin-bottom: 18px;
            text-align: center;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: 100%;

            .form-item {
                display: flex;
                flex-direction: column;
                gap: 8px;

                label {
                    font-size: 17px;
                    color: #333;
                }

                input {
                    padding: 10px;
                    border: 1.5px solid #bcdffb;
                    border-radius: 6px;
                    font-size: 16px;
                    background: #f7fbfe;
                    transition: border 0.2s;

                    &:focus {
                        border-color: #5ba9e9;
                        outline: none;
                        background: #fff;
                    }
                }
            }

            button[type="submit"] {
                margin-top: 8px;
                padding: 10px 0;
                background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
                color: #fff;
                border: none;
                border-radius: 6px;
                font-size: 17px;
                font-weight: bold;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
                transition: background 0.2s, box-shadow 0.2s;

                &:hover {
                    background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
                    box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
                }
            }
        }
    }
}
</style>